<template>
  <div>
    <div
      v-if="!$isMobile"
      class="pc"
    >
      <div class="head-btn">
        <div class="g-con box">
          <el-select v-model="formData.crewStatus" filterable>
            <el-option
              v-for="child in dictData.resume_work_status"
              :key="child.id"
              :value="child.dictValue"
              :label="child.dictLabel"
              >{{ child.dictLabel }}</el-option
            >
          </el-select>
          <el-button
            v-if="pageType == 'edit'"
            type="primary"
            @click="saveOredit"
            >{{ isEdit ? t('crew.b4') : t('crew.b5') }}</el-button
          >
          <el-button
            type="primary"
            @click="addSaveFn"
            v-if="pageType == 'add'"
          >
            {{ t('crew.b4') }}</el-button
          >
        </div>
      </div>
      <div class="body">
        <div
          class="g-con container"
          v-if="isEdit"
        >
          <el-form
            ref="formEl"
            :model="formData"
            :rules="rules"
            label-width="160px"
            label-position="left"
          >
            <el-card class="mb-3">
              <div
                slot="header"
                class="clearfix title"
              >
                <span class="ft-2">{{ t('crew.t1') }}</span>
              </div>
              <div class="content">
                <div class="head-sculpture">
                  <img
                    v-if="formData.headSculpture"
                    :src="formData.headSculpture"
                    alt=""
                  />
                  <div class="up">
                    <Upload @change="setHeadSculpture">
                      <img src="@/assets/img/icon_tuijianfengmian.png" />
                    </Upload>
                  </div>
                </div>
                <div class="user-info">
                  <div class="name">
                    {{ formData.crewName }}
                  </div>
                  <div class="grid-2">
                    <el-form-item
                      :label="t('crew.u1')"
                      prop="crewLocation"
                    >
                      <el-select v-model="formData.crewLocation" filterable>
                        <el-option
                          v-for="child in countryOptionList"
                          :key="child.countryCode"
                          :value="child.countryName"
                          :label="child.countryName"
                          >{{ child.countryName }}</el-option
                        >
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      :label="t('crew.u2')"
                      prop="passportNumber"
                    >
                      <el-input
                        :placeholder="`${t('crew.inputPlace')}${t('crew.u2')}`"
                        v-model="formData.passportNumber"
                        :maxlength="50"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      :label="t('crew.u3')"
                      prop="duties"
                    >
                      <el-select filterable v-model="formData.duties">
                        <el-option
                          v-for="child in dictData.duties"
                          :key="child.id"
                          :value="child.dictValue"
                          :label="child.dictLabel"
                          >{{ child.dictLabel }}</el-option
                        >
                      </el-select>
                    </el-form-item>

                    <el-form-item
                      :label="t('crew.u4')"
                      prop="seamanBookNumber"
                    >
                      <el-input
                        :placeholder="`${t('crew.inputPlace')}${t('crew.u4')}`"
                        v-model="formData.seamanBookNumber"
                        :maxlength="50"
                      ></el-input>
                    </el-form-item>

                    <el-form-item
                      :label="t('crew.u5')"
                      prop="shippingType"
                    >
                      <el-select v-model="formData.shippingType" filterable>
                        <el-option
                          v-for="child in dictData.ships_type"
                          :key="child.id"
                          :value="child.dictValue"
                          :label="child.dictLabel"
                          >{{ child.dictLabel }}</el-option
                        >
                      </el-select>
                    </el-form-item>

                    <el-form-item
                      :label="t('crew.u6')"
                      prop="graduateSchool"
                    >
                      <el-input
                        :placeholder="`${t('crew.inputPlace')}${t('crew.u6')}`"
                        v-model="formData.graduateSchool"
                        :maxlength="50"
                      ></el-input>
                    </el-form-item>

                    <el-form-item
                      :label="t('crew.u7')"
                      prop="nextSignOnDate"
                    >
                      <el-date-picker
                        @change="dateChange($event, 'nextSignOnDate')"
                        v-model="nextSignOnDateValue"
                        value-format="X"
                        type="date"
                        :placeholder="t('select_p')"
                      />
                    </el-form-item>

                    <el-form-item
                      :label="t('crew.u8')"
                      prop="telephone"
                    >
                      <el-input
                        :placeholder="`${t('crew.inputPlace')}${t('crew.u8')}`"
                        v-model="formData.telephone"
                        :maxlength="50"
                      ></el-input>
                    </el-form-item>

                    <el-form-item
                      :label="t('crew.u9')"
                      prop="birthDate"
                    >
                      <el-date-picker
                        @change="dateChange($event, 'birthDate')"
                        v-model="birthDateValue"
                        value-format="X"
                        type="date"
                        :placeholder="t('select_p')"
                      />
                    </el-form-item>

                    <el-form-item
                      :label="t('crew.u10')"
                      prop="email"
                    >
                      <el-input
                        :placeholder="`${t('crew.inputPlace')}`"
                        v-model="formData.email"
                        :maxlength="50"
                      ></el-input>
                    </el-form-item>

                    <el-form-item
                      :label="t('crew.u11')"
                      prop="englishLevel"
                    >
                      <el-select filterable v-model="formData.englishLevel">
                        <el-option
                          v-for="child in dictData.english_level"
                          :key="child.id"
                          :value="child.dictValue"
                          :label="child.dictLabel"
                          >{{ child.dictLabel }}</el-option
                        >
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </div>
            </el-card>
            <el-card class="mb-3">
              <div
                slot="header"
                class="clearfix title"
              >
                <span class="ft-2">{{ t('crew.t2') }}</span>
              </div>
              <div class="doc-information">
                <div class="flexcc-col">
                  <Upload @change="(val) => (formData.seamanBook = val)">
                    <img
                      v-if="formData.seamanBook"
                      :src="formData.seamanBook"
                    />
                    <img
                      v-else
                      src="@/assets/img/2023-08-30_173522.png"
                    />
                  </Upload>
                  <p>{{ t('crew.c1') }}</p>
                </div>
                <div class="flexcc-col">
                  <Upload @change="(val) => (formData.serviceBook = val)">
                    <img
                      v-if="formData.serviceBook"
                      :src="formData.serviceBook"
                    />
                    <img
                      v-else
                      src="@/assets/img/2023-08-30_173522.png"
                    />
                  </Upload>
                  <p>{{ t('crew.c2') }}</p>
                </div>
              </div>
            </el-card>
            <!-- 适任证书 -->
            <el-card class="mb-3">
              <div
                slot="header"
                class="clearfix title"
              >
                <span class="ft-2">{{ t('crew.t3') }}</span>
              </div>
              <el-table
                :data="[{}]"
                border
                style="width: 100%"
                header-cell-class-name="table_header"
              >
                <el-table-column
                  prop="certificateType"
                  :label="`${t('crew.l1')}`"
                >
                  <template #default="scope">
                    <el-form-item
                      prop="certificateType"
                      label-width="0px"
                    >
                      <el-input
                        :placeholder="`${t('crew.inputPlace')}`"
                        v-model="formData.certificateType"
                        :maxlength="100"
                      ></el-input>
                      <!-- <el-select filterable v-model="formData.certificateType">
                        <el-option
                          v-for="child in dictData.certificate_type"
                          :key="child.id"
                          :value="child.dictValue"
                          :label="child.dictLabel"
                          >{{ child.dictLabel }}</el-option
                        >
                      </el-select> -->
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="certificateNumber"
                  :label="`${t('crew.l2')}`"
                >
                  <template #default="scope">
                    <el-form-item
                      prop="certificateNumber"
                      label-width="0px"
                    >
                      <el-input
                        :placeholder="`${t('crew.inputPlace')}`"
                        v-model="formData.certificateNumber"
                        :maxlength="50"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="periodOfValidity"
                  :label="`${t('crew.l3')}`"
                  width="250px"
                >
                  <template #default="scope">
                    <el-form-item
                      prop="periodOfValidity"
                      label-width="0px"
                    >
                      <el-date-picker
                        @change="dateChange($event, 'periodOfValidity')"
                        v-model="periodOfValidityValue"
                        value-format="X"
                        type="date"
                        :placeholder="t('select_p')"
                      />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="competentAuthority"
                  :label="`${t('crew.l4')}`"
                >
                  <template #default="scope">
                    <el-form-item
                      prop="competentAuthority"
                      label-width="0px"
                    >
                      <el-input
                        :placeholder="`${t('crew.inputPlace')}${t('crew.l4')}`"
                        v-model="formData.competentAuthority"
                        :maxlength="50"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="placeOfIssuance"
                  :label="`${t('crew.l5')}`"
                >
                  <template #default="scope">
                    <el-form-item
                      prop="placeOfIssuance"
                      label-width="0px"
                    >
                      <el-input
                        :placeholder="`${t('crew.inputPlace')}${t('crew.l5')}`"
                        v-model="formData.placeOfIssuance"
                        :maxlength="50"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
            <!-- 适任职务 -->
            <el-card class="mb-3">
              <div
                slot="header"
                class="clearfix title"
              >
                <span class="ft-2">{{ t('crew.t4') }}</span>
              </div>
              <el-table
                :data="[{}]"
                border
                style="width: 100%"
                header-cell-class-name="table_header"
              >
                <el-table-column
                  prop="duties"
                  :label="`${t('crew.l6')}`"
                >
                  <template #default="scope">
                    <el-form-item
                      prop="duties"
                      label-width="0px"
                    >
                      <el-select v-model="formData.duties" filterable>
                        <el-option
                          v-for="child in dictData.duties"
                          :key="child.id"
                          :value="child.dictValue"
                          :label="child.dictLabel"
                          >{{ child.dictLabel }}</el-option
                        >
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="shippingType"
                  :label="`${t('crew.l7')}`"
                >
                  <template #default="scope">
                    <el-form-item
                      prop="shippingType"
                      label-width="0px"
                    >
                      <el-select v-model="formData.shippingType" filterable>
                        <el-option
                          v-for="child in dictData.ships_type"
                          :key="child.id"
                          :value="child.dictValue"
                          :label="child.dictLabel"
                          >{{ child.dictLabel }}</el-option
                        >
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="monthlyPay"
                  :label="`${t('crew.l8')}`"
                >
                  <template #default="scope">
                    <div style="display: flex">
                      <el-form-item
                          prop="monthlyPay"
                          label-width="0px"
                          style="width: calc(100% - 110px)"
                      >
                        <el-input-number
                            :min="0"
                            :max="9999999999"
                            :controls="false"
                            :placeholder="`${t('crew.inputPlace')}`"
                            v-model="formData.monthlyPay"
                        ></el-input-number>
                      </el-form-item>

                      <el-form-item
                          prop="currency"
                          label-width="0px"
                          style="width: 100px;margin-left: 10px;"
                      >
                        <el-select
                            v-model="formData.currency"
                            class="wp-100"
                            :placeholder="t('select_p')"
                            filterable
                            clearable
                        >
                          <el-option
                              v-for="item in dictData['currency']"
                              :key="item.dictValue"
                              :label="item.dictLabel"
                              :value="item.dictValue"
                          />
                        </el-select>
                      </el-form-item>
                    </div>



                  </template>
                </el-table-column>
                <el-table-column
                  prop="servicePeriodMonth"
                  :label="`${t('crew.l9')}`"
                >
                  <template #default="scope">
                    <el-form-item
                      prop="servicePeriodMonth"
                      label-width="0px"
                    >
                      <el-input-number
                        :min="0"
                        :max="999"
                        :controls="false"
                        :placeholder="`${t('crew.inputPlace')}`"
                        v-model="formData.servicePeriodMonth"
                      ></el-input-number>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
            <!-- 服务经历 -->
            <el-card class="mb-3">
              <div
                slot="header"
                class="clearfix title"
              >
                <div
                  class="card-header"
                  style="justify-content: space-between; display: flex"
                >
                  <span class="ft-2">{{ t('crew.t5') }}</span>
                  <el-button
                    type="primary"
                    class="button"
                    @click="addExperienceFn"
                    :disabled="formData.shcwCrewExperiences.length == 3"
                    >{{ t('crew.b3') }}</el-button
                  >
                </div>
              </div>
              <el-table
                :data="formData.shcwCrewExperiences"
                border
                style="width: 100%"
                header-cell-class-name="table_header"
              >
                <el-table-column
                  prop="startServiceTime"
                  :label="`${t('crew.l10')}`"
                  width="360px"
                >
                  <template #default="scope">
                    <el-date-picker
                      @change="rangeChange($event, 'startServiceTime', 'endServiceTime', scope.row)"
                      v-model="scope.row.serviceTime"
                      type="monthrange"
                      :placeholder="t('select_p')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="shipName"
                  :label="`${t('crew.l11')}`"
                  width="180px"
                >
                  <template #default="scope">
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="scope.row.shipName"
                      :maxlength="50"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="shipFlag"
                  :label="`${t('crew.l12')}`"
                  width="180px"
                >
                  <template #default="scope">
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="scope.row.shipFlag"
                      :maxlength="50"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="deadweightTon"
                  :label="`${t('crew.l13')}`"
                  width="180px"
                >
                  <template #default="scope">
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="scope.row.deadweightTon"
                      :maxlength="50"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="hostModel"
                  :label="`${t('crew.l14')}`"
                  width="180px"
                >
                  <template #default="scope">
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="scope.row.hostModel"
                      :maxlength="50"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="horsepower"
                  :label="`${t('crew.l15')}`"
                  width="180px"
                >
                  <template #default="scope">
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="scope.row.horsepower"
                      :maxlength="50"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="power"
                  :label="`${t('crew.l16')}`"
                  width="180px"
                >
                  <template #default="scope">
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="scope.row.power"
                      :maxlength="50"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="grossTon"
                  :label="`${t('crew.l17')}`"
                  width="180px"
                >
                  <template #default="scope">
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="scope.row.grossTon"
                      :maxlength="50"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="shippingType"
                  :label="`${t('crew.l18')}`"
                  width="180px"
                >
                  <template #default="scope">
                    <el-select v-model="scope.row.shippingType" filterable>
                      <el-option
                        v-for="child in dictData.ships_type"
                        :key="child.id"
                        :value="child.dictValue"
                        :label="child.dictLabel"
                        >{{ child.dictLabel }}</el-option
                      >
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="duties"
                  :label="`${t('crew.l19')}`"
                  width="180px"
                >
                  <template #default="scope">
                    <el-select v-model="scope.row.duties">
                      <el-option
                        v-for="child in dictData.duties"
                        :key="child.id"
                        :value="child.dictValue"
                        :label="child.dictLabel"
                        >{{ child.dictLabel }}</el-option
                      >
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="corporateName"
                  :label="`${t('crew.l20')}`"
                  width="180px"
                >
                  <template #default="scope">
                    <el-input
                      :placeholder="`${t('crew.inputPlace')}`"
                      v-model="scope.row.corporateName"
                      :maxlength="50"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-form>
        </div>
        <div
          class="g-con container"
          v-else
        >
          <el-card class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t1') }}</span>
            </div>
            <div class="content">
              <div class="head-sculpture">
                <img
                  :src="formData.headSculpture"
                  alt=""
                />
              </div>
              <div class="user-info">
                <div class="name">
                  {{ formData.crewName }}
                  <div>
                    {{ getDictLabel('resume_work_status', formData.crewStatus) }}
                  </div>
                </div>
                <el-descriptions :column="2">
                  <el-descriptions-item :label="`${t('crew.u1')}`">
                    {{ formData.crewLocation }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u2')}`">
                    {{ formData.passportNumber }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u3')}`">
                    {{ getDictLabel('duties', formData.duties) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u4')}`">
                    {{ formData.seamanBookNumber }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u5')}`">
                    {{ getDictLabel('ships_type', formData.shippingType) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u6')}`">
                    {{ formData.graduateSchool }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u7')}`">
                    {{ dateFormat(nextSignOnDateValue,3) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u8')}`">
                    {{ formData.telephone }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u9')}`">
                    {{ dateFormat(formData.birthDate,3) }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u10')}`">
                    {{ formData.email }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`${t('crew.u11')}`">
                    {{ getDictLabel('english_level', formData.englishLevel) }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
          <el-card class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t2') }}</span>
            </div>
            <div class="doc-information">
              <div class="flexcc-col">
                <img
                  :src="formData.seamanBook"
                  alt=""
                />
                <p>{{ t('crew.c1') }}</p>
              </div>
              <div class="flexcc-col">
                <img
                  :src="formData.serviceBook"
                  alt=""
                />
                <p>{{ t('crew.c2') }}</p>
              </div>
            </div>
          </el-card>
          <el-card class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t3') }}</span>
            </div>
            <el-table
              :data="[{ ...formData }]"
              border
              style="width: 100%"
              header-cell-class-name="table_header"
            >
              <el-table-column
                prop="certificateType"
                :label="`${t('crew.l1')}`"
              >
                <!-- <template #default="scope">
                  {{ getDictLabel('certificate_type', formData.certificateType) }}
                </template> -->
              </el-table-column>
              <el-table-column
                prop="certificateNumber"
                :label="`${t('crew.l2')}`"
              >
              </el-table-column>
              <el-table-column
                prop="periodOfValidity"
                :label="`${t('crew.l3')}`"
              >
                <template #default="scope">
                  {{ dateFormat(periodOfValidityValue,3) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="competentAuthority"
                :label="`${t('crew.l4')}`"
              >
              </el-table-column>
              <el-table-column
                prop="placeOfIssuance"
                :label="`${t('crew.l5')}`"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t4') }}</span>
            </div>
            <el-table
              :data="[{ ...formData }]"
              border
              style="width: 100%"
              header-cell-class-name="table_header"
            >
              <el-table-column
                prop="duties"
                :label="`${t('crew.l6')}`"
              >
                <template #default="scope">
                  {{ getDictLabel('duties', formData.duties) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="shippingType"
                :label="`${t('crew.l7')}`"
              >
                <template #default="scope">
                  {{ getDictLabel('ships_type', formData.shippingType) }}
                </template>
              </el-table-column>

              <el-table-column
                prop="monthlyPay"
                :label="`${t('crew.l8')}`"
              >
                <template #default="scope">
                  {{formData.monthlyPay}}
                  {{ getDictLabel('currency', formData.currency) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="servicePeriodMonth"
                :label="`${t('crew.l9')}`"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card class="mb-3">
            <div
              slot="header"
              class="clearfix title"
            >
              <span class="ft-2">{{ t('crew.t5') }}</span>
            </div>
            <el-table
              :data="formData.shcwCrewExperiences"
              border
              style="width: 100%"
              header-cell-class-name="table_header"
            >
              <el-table-column
                prop="startServiceTime"
                :label="`${t('crew.l10')}`"
                width="180px"
              >
                <template #default="scope"> {{ dateFormat(scope.row.startServiceTime, 2).slice(0, 7) }}-{{ dateFormat(scope.row.endServiceTime, 2).slice(0, 7) }} </template>
              </el-table-column>
              <el-table-column
                prop="shipName"
                :label="`${t('crew.l11')}`"
              >
              </el-table-column>
              <el-table-column
                prop="shipFlag"
                :label="`${t('crew.l12')}`"
              >
              </el-table-column>
              <el-table-column
                prop="deadweightTon"
                :label="`${t('crew.l13')}`"
              >
              </el-table-column>
              <el-table-column
                prop="hostModel"
                :label="`${t('crew.l14')}`"
              >
              </el-table-column>
              <el-table-column
                prop="horsepower"
                :label="`${t('crew.l15')}`"
              >
              </el-table-column>
              <el-table-column
                prop="power"
                :label="`${t('crew.l16')}`"
              >
              </el-table-column>
              <el-table-column
                prop="grossTon"
                :label="`${t('crew.l17')}`"
              >
              </el-table-column>
              <el-table-column
                prop="shippingType"
                :label="`${t('crew.l18')}`"
              >
                <template #default="scope">
                  {{ getDictLabel('ships_type', scope.row.shippingType) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="duties"
                :label="`${t('crew.l19')}`"
              >
                <template #default="scope">
                  {{ getDictLabel('duties', scope.row.duties) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="corporateName"
                :label="`${t('crew.l20')}`"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </div>

    <div v-if="$isMobile">
      <mAddCrewResume />
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { addCrewResume, getCrewResumeById, editCrewResume } from '@/service/crew.js'
import { countryListApi } from '@/service/common.js'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import Upload from '@/components/Upload.vue'
import Uploads from '@/components/Uploads.vue'
import { uploads } from '@/service/common.js'
import { dateFormat } from '@/utils/index'
import useDict from '@/hooks/useDict'
import mAddCrewResume from './mAddCrewResume.vue'
const { dictData, getDictData, getDictLabel } = useDict()
const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

const emit = defineEmits(['update:CrewResumeVis'])
const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()
const nextSignOnDateValue = ref(undefined)
const birthDateValue = ref(undefined)
const periodOfValidityValue = ref(undefined)
const pageType = ref(route.query.pageType)
const formData = ref({
  // headSculpture: JSON.parse(localStorage.getItem('login')).userInfo.avatar,
  crewName: JSON.parse(localStorage.getItem('login')).userInfo.userName,
  shcwCrewExperiences: []
})
const rules = ref({
  crewLocation: [{ required: true, message: '', trigger: 'change' }],
  passportNumber: [{ required: false, message: '', trigger: 'change' }],
  duties: [{ required: true, message: '', trigger: 'change' }],
  seamanBookNumber: [{ required: false, message: '', trigger: 'change' }],
  shippingType: [{ required: true, message: '', trigger: 'change' }],
  graduateSchool: [{ required: true, message: '', trigger: 'change' }],
  nextSignOnDate: [{ required: true, message: '', trigger: 'change' }],
  telephone: [{ required: true, message: '', trigger: 'change' }],
  birthDate: [{ required: true, message: '', trigger: 'change' }],
  email: [{ required: true, message: '', trigger: 'change' }],
  englishLevel: [{ required: true, message: '', trigger: 'change' }],
  certificateType: [{ required: true, message: '', trigger: 'change' }],
  certificateNumber: [{ required: true, message: '', trigger: 'change' }],
  periodOfValidity: [{ required: true, message: '', trigger: 'change' }],
  competentAuthority: [{ required: true, message: '', trigger: 'change' }],
  placeOfIssuance: [{ required: true, message: '', trigger: 'change' }],
  monthlyPay: [{ required: true, message: '', trigger: 'change' }],
  currency: [{ required: true, message: '', trigger: 'change' }],
  servicePeriodMonth: [{ required: true, message: '', trigger: 'change' }]
})

const setHeadSculpture = (val) => {
  formData.value.headSculpture = val
}

// 添加经历
const addExperienceFn = () => {
  formData.value.shcwCrewExperiences.push({
    startServiceTime: undefined,
    shipName: undefined,
    shipFlag: undefined,
    deadweightTon: undefined,
    hostModel: undefined,
    horsepower: undefined,
    power: undefined,
    grossTon: undefined,
    shippingType: undefined,
    duties: undefined,
    corporateName: undefined,
    serviceTime: []
  })
}

const dateChange = (val, key) => {
  if (val) {
    // 10位时间戳
    formData.value[key] = String(val).substring(0, 10) * 1
  } else {
    formData.value[key] = null
  }
}
const rangeChange = (val, start, end, item) => {
  if (val) {
    // 10位时间戳
    item[start] = val[0] / 1000
    item[end] = val[1] / 1000
  } else {
    item[start] = null
    item[end] = null
  }
}

const isEdit = ref(pageType == 'edit' ? false : true)
const formEl = ref()
// 编辑保存
const saveOredit = () => {
  if (isEdit.value) {
    if (!formData.value.crewStatus) {
      ElMessage.warning(t('crew.w4'))
      return
    }
    if (!formData.value.headSculpture) {
      ElMessage.warning(t('crew.w1'))
      return
    }
    if (!formData.value.seamanBook) {
      ElMessage.warning(t('crew.w2'))
      return
    }
    if (!formData.value.serviceBook) {
      ElMessage.warning(t('crew.w3'))
      return
    }

    if (!formEl.value) return

    formEl.value.validate((valid, fields) => {
      if (valid) {
        editCrewResume(formData.value).then(({ msg }) => {
          ElMessage({
            type: 'success',
            message: msg
          })
          isEdit.value = false
          getDetailInfo()
        })
      } else {
        ElMessage.warning(t('crew.w0'))
      }
    })
  } else {
    isEdit.value = true
  }
}

// 新增保存
const addSaveFn = async () => {
  if (!formData.value.crewStatus) {
    ElMessage.warning(t('crew.w4'))
    return
  }
  if (!formData.value.headSculpture) {
    ElMessage.warning(t('crew.w1'))
    return
  }
  if (!formData.value.seamanBook) {
    ElMessage.warning(t('crew.w2'))
    return
  }
  if (!formData.value.serviceBook) {
    ElMessage.warning(t('crew.w3'))
    return
  }

  if (!formEl.value) return

  formEl.value.validate((valid, fields) => {
    if (valid) {
      addCrewResume(formData.value).then(({ msg }) => {
        ElMessage({
          message: msg,
          type: 'success'
        })
        router.go(-1)
      })
    } else {
      ElMessage.warning(t('crew.w0'))
    }
  })
}

const countryOptionList = ref([])
const getDetailInfo = () => {
  getCrewResumeById(JSON.parse(localStorage.getItem('login')).userInfo.id).then(({ data }) => {
    if (!data.id) {
      pageType.value = 'add'
      return
    }

    formData.value = { ...data, ...formData.value }
    formData.value.monthlyPay = Number(formData.value.monthlyPay)
    //预计下次登船转换
    // formData.value.nextSignOnDate=
    nextSignOnDateValue.value = Number(formData.value.nextSignOnDate)
    //出生日期转换
    // formData.value.birthDate=
    birthDateValue.value = Number(formData.value.birthDate)
    //有效期转换
    // formData.value.periodOfValidity=dateFormat(formData.value.periodOfValidity, 2)
    periodOfValidityValue.value = Number(formData.value.periodOfValidity)
    //
    formData.value.shcwCrewExperiences = formData.value.shcwCrewExperiences.map((item) => {
      item.serviceTime = [dateFormat(item.startServiceTime, 2).slice(0, 7), dateFormat(item.endServiceTime, 2).slice(0, 7)]
      return item
    })
  })
}
onMounted(() => {
  countryListApi().then((res) => {
    countryOptionList.value = res.data
  })
  getDictData('resume_work_status')
  getDictData('duties')
  getDictData('currency')
  getDictData('ships_type')
  getDictData('english_level')
  getDictData('certificate_type')
  if (pageType.value == 'edit') {
    getDetailInfo()
  }
})
</script>
<style scoped lang="scss">
:deep(.el-input-number) {
  width: 100%;
  .el-input__inner {
    text-align: left;
  }
}
.pc {
  .container {
    .doc-information {
      display: flex;
      margin-top: 20px;
      // padding-left: 20px;

      > div {
        margin-right: 30px;

        img {
          width: 84px;
          height: 84px;
        }

        p {
          // text-align: center;
          padding-top: 8px;
          // padding-left: 35px;
        }
      }
    }
  }

  .head-btn {
    width: 100%;
    height: 110px;

    .box {
      border-top: 2px solid black;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      padding-top: 30px;

      :deep(.el-input__inner) {
        height: 40px;
      }

      button {
        height: 40px;
        margin-left: 20px;
        font-weight: bold;
        color: #ffffff;

        &:nth-child(1) {
          background: rgba(239, 178, 178, 0.5);
          border: 1px solid rgba(239, 178, 178, 0.5);
          font-size: 12px;
          font-weight: bold;
          color: #ca2a02;
        }
      }
    }
  }

  .body {
    width: 100%;
    background: rgba(245, 245, 245, 1);
    margin-bottom: -76px;
    padding-bottom: 30px;
    padding-top: 30px;

    .title {

      font-weight: bold;
      color: #ca2a02;
      border-bottom: 2px solid black;
      line-height: 50px;
    }

    :deep(.table_header) {
      height: 50px;
      background: #f0f3f8;
      font-size: 14px;

      font-weight: bold;
      color: #252628;
      border: rgba(235, 235, 235, 1) 1px solid;
    }

    .content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding-top: 50px;
      padding-left: 38px;
      padding-bottom: 44px;

      .head-sculpture {
        width: 162px;
        height: 162px;
        margin-right: 30px;
        border-radius: 50%;
        background: #ccc;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }

        .up {
          position: absolute;
          left: 50%;
          width: 40px;
          height: 40px;
          transform: translateX(-50%);
          bottom: -20px;
        }
      }

      .user-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .name {
          width: 100%;
          display: flex;
          font-size: 24px;
          font-family: Source Han Sans CN;
          font-weight: 800;
          color: #252628;
          line-height: 22px;
          margin-bottom: 20px;

          div {
            min-width: 40px;
            height: 24px;
            background: rgba(202, 42, 2, 0.1);
            border-radius: 2px;
            margin-left: 12px;
            font-size: 12px;

            font-weight: 400;
            color: #ca2a02;
            padding: 0 8px;
          }
        }

        :deep(.el-descriptions__label) {
          min-width: 120px;
          color: rgba(157, 159, 165, 1) !important;
          font-size: 14px;
          text-align: left;

          font-weight: 400;
          line-height: 28px;
          display: inline-block;
        }

        :deep(.el-descriptions__content) {
          color: black;

          font-weight: 400;
          line-height: 28px;
        }

        :deep(.el-input) {
          width: 300px;
          height: 40px;
        }

        :deep(.el-input__wrapper) {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
